<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>xuluo</title>
	<link rel="stylesheet" type="text/css" href="css/picker.css">
	<style>
		*{margin:0;padding:0;font-family:'microsoft yahei',SimSun}
		li,ul{list-style:none}
		a{text-decoration:none;outline:0;color:inherit}
		.btn{display:inline-block;padding:0 22px;height:35px;line-height:35px;background:#009688;color:#fff;font-size:15px;cursor:pointer;vertical-align:middle;border-radius:2px}
		.btn:hover{opacity:1;filter:alpha(opacity=100)}
		.btn:active{opacity:.9;filter:alpha(opacity=90)}
	</style>
</head>
<body>
	<div style="text-align: center;margin: 20px auto;"> 
		<a id="datePicker" href="javascript:;" class="btn">日期</a> 
	</div>
	<span id="dateShow"></span>
	<div style="text-align: center;margin: 20px auto;"> 
		<a id="cityPicker" href="javascript:;" class="btn" onclick="cityPicker(this)">城市</a> 
	</div>
	<!-- <script src="../../js/h5.js"></script> -->
	<script type="text/javascript" src="js/picker2.js"></script>
	<script>
		var newdate=new Date();
		document.querySelector('#datePicker').onclick=function(){
			var this_=this;
			datePicker({
			    start: 1990,
			    end: 2019,
			    defaultValue: [newdate.getFullYear(), newdate.getMonth()+1, newdate.getDate()],
			    onChange: function(res){
			        console.log(res);
			    },
			    onConfirm: function(res){
			    	$(this_).html(res[0].label+res[1].label+res[2].label)
			    }
			});
		}
		var cityPicker=function(obj){
			var this_=obj;
			picker([{
		        label: '广东',
		        value: 0,
		        children: [{
		            label: '广州',
		            value: 0,
		            children: [{
		                label: '海珠',
		                value: 0
		            }, {
		                label: '番禺',
		                value: 1
		            }]
		        }, {
		            label: '佛山',
		            value: 1,
		            children: [{
		                label: '禅城',
		                value: 0
		            }, {
		                label: '南海',
		                value: 1
		            }]
		        }]
		    }, {
		        label: '广西',
		        value: 1,
		        children: [{
		            label: '南宁',
		            value: 0,
		            children: [{
		                label: '青秀',
		                value: 0
		            }, {
		                label: '兴宁',
		                value: 1
		            }]
		        }, {
		            label: '桂林',
		            value: 1,
		            children: [{
		                label: '象山',
		                value: 0
		            }, {
		                label: '秀峰',
		                value: 1
		            }]
		        }]
		    }], {
		        depth: 3,
		        defaultValue: [0, 1, 1],
		        onChange: function(res){
			        console.log(res);
			    },
		        onConfirm: function(res) {
		            $(this_).html(res[0].label+res[1].label+res[2].label)
		        }
		    });
		};
	</script>
</body>
</html>